<template>
  <div>
<!--      二维码&ndash;&gt;-->
      <div class="menu_er_code" @mouseenter="indiv()" @mouseleave="outdiv()">
          <div id="move">
              <img class="code_img"  :src="this.imgs.code">
          </div>
          <div class="hiden" id="hiden">
              <img class="sao_img"  :src='this.imgs.illustrate'>
          </div>
      </div>
      <div class="menu_write">
          <p>打开<a href=""><span>手机京东</span></a>&nbsp;&nbsp;&nbsp;扫描二维码</p>
      </div>
      <div class="menu_images">
          <div>
              <b></b>
              <em>免输入</em>
          </div>
          <div>
              <b></b>
              <em>更快</em>
          </div>
          <div>
              <b></b>
              <em>更安全</em>
          </div>
      </div>

  </div>
</template>

<script>
export default {
    name: "codeLogin",
    components: {
    },
    props: {

    },
    data() {
        return {
            imgs:{
                code:require('@/assets/show.png'),
                illustrate:require('@/assets/phone-orange.png'),
            },
            flage:true
        };
    },
    created() {

    },
    mounted() {
    },
    methods: {
        indiv(){
            var div =document.getElementById('move');
            var hidendiv=document.getElementById("hiden");
            console.log(div.offsetLeft);
                var timer;
                //关闭上一个定时器
                clearInterval(timer);
                //开启一个定时器，用来执行动画效果
                timer = setInterval(function(){
                    //获取box1的原来的left值
                    var oldValue = parseInt(div.offsetLeft);
                    //在旧值的基础上增加
                    var newValue = oldValue - 20;
                    //判断newValue是否大于800
                    if(newValue <= 0){
                        hidendiv.style.display='block';
                        newValue = 0;
                    }
                    //将新值设置给box1
                    div.style.left = newValue + "px";

                    //当元素移动到800px时，使其停止执行动画
                    if(newValue == 0){
                        //达到目标，关闭定时器
                        clearInterval(timer);
                    }
                },1);
        },
        outdiv(){
            var div =document.getElementById('move');
            var hidendiv=document.getElementById("hiden");
            // div.style.left="-80";
            var timer;
            //关闭上一个定时器
            clearInterval(timer);
            //开启一个定时器，用来执行动画效果
            timer = setInterval(function(){
                //获取box1的原来的left值
                var oldValue = parseInt(div.offsetLeft);
                //在旧值的基础上增加
                var newValue = oldValue + 20;
                //判断newValue是否大于800
                if(newValue >=90 ){
                    hidendiv.style.display='none';
                    newValue = 90;
                }
                //将新值设置给box1
                div.style.left = newValue + "px";
                //当元素移动到800px时，使其停止执行动画
                if(newValue == 90){
                    //达到目标，关闭定时器
                    clearInterval(timer);
                }
            },1);

        }
    },
    //监听外部参数实时更新子组件内部变量
    watch: {
        immediate: true,
    },
};
</script>

<style scoped>
/*二维码*/
.menu_er_code{
    height: 180px;
    /*弹性布局*/
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}
.menu_er_code #move{
    width: 155px;
    height: 147px;
    /**/
    display: flex;
    justify-content: center;
    align-items: center;

    position: absolute;
    box-sizing: content-box;
    display: block;
    padding: 8px;
    border: 1px solid #f4f4f4;
}
.menu_er_code #move img{

}
.menu_er_code #hiden{
    position: absolute;
    right: 0px;
    display: none;
}

/*二维码下面的文字*/
.menu_write p{
    font: 12px/150% Arial,Verdana,"\5b8b\4f53";
    color: #666;
}
.menu_write p a{
    color: #e4393c;
    text-decoration: none;
}
/*二维码下的文字下的图片和文字*/
.menu_images{
    padding-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.menu_images div{
    display: flex;
    justify-content: center;
    align-items: center;
}
.menu_images div b{
    width: 25px;
    height: 25px;
    display: block;
    background-image: url("@/assets/qr-coagent.png");
    background-position: -27px;
}
.menu_images div em{
    padding-right: 18px;
    font: 12px/150% Arial,Verdana,"\5b8b\4f53";
}

</style>